<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <div v-if="meta.indexOf('MissClassAdd') > -1" class="doumee-filter">
      <el-button type="primary" @click="addBk">补课</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column align="center" min-width="100" label="学员名称" prop="studentName" show-overflow-tooltip />
      <el-table-column align="center" min-width="250" label="会员信息" prop="memberInfo">
        <template v-slot="scope">
          <span>{{ scope.row.memberName }}-</span>
          <span v-if="scope.row.memberPhone">{{ scope.row.memberPhone }}-</span>
          <span>{{ scope.row.memberNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="剩余课时" prop="classNum" show-overflow-tooltip />
      <el-table-column
        align="center"
        label="缺课课程"
        prop="courseName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="上课时间"
        prop="classDate"
        min-width="250"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="补课课程"
        prop="bkCourse"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="补课上课时间"
        prop="bkDate"
        min-width="250"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="补课状态"
        prop="bkStatus"
        min-width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          {{ scope.row.bkStatus == "0" ? "未补课" : "已补课" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="上课状态"
        prop="status"
        min-width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          {{ scope.row.status == "0" ? "缺课" : "已签到" }}
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-dialog title="补课" :visible.sync="showDetails" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form
        ref="ruleForm"
        class="doumee-form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-suffix="："
      >
        <el-form-item label="补课学员">
          <el-input
            v-model="form.courseName"
            disabled
            type="text"
            placeholder="请输入补课学员"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="课程信息">
          <el-col :span="10">
            <el-select
              v-model="form.courseId"
              placeholder="请选择课程"
              filterable
              style="width: 100%"
              @change="getKsb"
            >
              <el-option
                v-for="item in kclist"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              />
            </el-select>
          </el-col>
          <el-col class="line" :span="1" style="text-align: center">-</el-col>
          <el-col :span="10">
            <el-select
              v-model="form.courseTimeId"
              filterable
              placeholder="请选择课时"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in ksListb"
                :key="index"
                :label="item.time"
                :value="item.courseTimeId"
              />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetails = false">取消</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="confirmBtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import { missClass, missClassSave, listCourse, kcKsList } from '@/api'
import { queryFormConfig } from './config'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'MakeUpLessons',
  components: {
    QueryForm
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      queryFormConfig,
      subLoading: false,
      kclist: [],
      ksList: [],
      ksListb: [],
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      lmList: [],
      statusList: [
        { value: '0', label: '待上课' },
        { value: '1', label: '已上课' }
      ],
      venueId: sessionStorage.getItem('venueId'),
      filters: {},
      listLoading: true,
      showDetails: false,
      form: {},
      rules: {
        discountType: [{ required: true, message: '请选择折扣类型', trigger: 'change' }]
      },
      multipleSelection: []
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.getkcList()
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getkcList() {
      const venueId = sessionStorage.getItem('venueId')
      listCourse({ param: { venueId, flag: '2' }})
        .then(res => {
          if (res.errorCode === '000000') {
            this.kclist = res.recordList || []
            this.queryFormConfig.formItems[2].options = this.kclist.map(item => {
              item.label = item.courseName
              item.value = item.courseId
              return item
            })
          }
        })
    },
    getKs() {
      const courseId = this.filters.courseId
      if (courseId) {
        kcKsList({ param: { courseId }})
          .then(res => {
            if (res.errorCode === '000000') {
              this.ksList = res.recordList || []
            } else {
              this.ksList = []
            }
          })
      } else {
        this.ksList = []
      }
      this.$set(this.filters, 'courseTimeId', '')
    },
    getKsb() {
      const courseId = this.form.courseId
      if (courseId) {
        kcKsList({ param: { courseId }})
          .then(res => {
            if (res.errorCode === '000000') {
              this.ksListb = res.recordList || []
            } else {
              this.ksListb = []
            }
          })
      } else {
        this.ksListb = []
      }
      this.$set(this.filters, 'courseTimeId', '')
      this.$set(this.form, 'courseTimeId', '')
    },
    confirmBtn() {
      const { form } = this
      const venueId = sessionStorage.getItem('venueId')
      if (!form.courseId) {
        this.$message.error('请选择课程')
        return false
      }
      if (!form.courseTimeId) {
        this.$message.error('请选择课时')
        return false
      }
      this.subLoading = true
      missClassSave({ param: { venueId, ...form }})
        .then(res => {
          this.subLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('提交成功')
            this.showDetails = false
            this.getList(1)
          }
        })
        .catch(() => {
          this.subLoading = false
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(11, val)
    },
    addBk(e) {
      if (!this.multipleSelection || this.multipleSelection.length === 0) {
        this.$message.error('请选择补课学员')
        return false
      }
      const multipleSelection = this.multipleSelection
      this.showDetails = true
      const ids = []
      const names = []
      multipleSelection.forEach(e => {
        ids.push(e.id)
        names.push(e.studentName)
      })
      this.ksListb = []
      this.$set(this.form, 'ids', ids)
      this.$set(this.form, 'courseName', names.join(','))
      this.$set(this.form, 'courseId', '')
      this.$set(this.form, 'courseTimeId', '')
    },
    clearList() {
      this.filters = {}
      this.ksList = []
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      missClass({
        pagination,
        param: {
          venueId,
          ...filters
        }
      })
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
          }
        }).catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-title {
  margin-bottom: 12px;
  color: #333;
}
.studentNum{
  color:#435EBE;
  cursor: pointer;
}
</style>
